<template>
  <div v-loading="loadingFlag">
    <Data_navigate></Data_navigate>
    <el-row :gutter="20" style="margin: 0px;padding-right: 30px;padding-top: 20px;">
      <home_percent color-type="purple" icon="User" :persent="diskInfo.percent" :title1="'磁盘' + diskInfo.percent + '%'"
        :title2="diskInfo.title" :title3="'附件:' + filesInfo.all">
      </home_percent>
      <home_percent color-type="purple" icon="Files" :persent="ramInfo.percent" :title1="'内存' + ramInfo.percent + '%'"
        :title2="'缓存:' + cacheInfo.use + '条'">
      </home_percent>
      <home_percent color-type="purple" icon="Fold" :persent="visitInfo.percent" :title1="visitInfo.title"
        :title2="visitInfo.title + visitInfo.use">
      </home_percent>
      <home_user_info icon="User" title="用户信息" color-type="red"></home_user_info>
      <home_ctrls color-type="purple" icon="Odometer" title="当前监控" :func="loadInfo" :num="filesInfo.use"></home_ctrls>
      <home_data_num color-type="red" icon="User" title="临时文件" :num="filesInfo.use"></home_data_num>
      <home_data_num color-type="blue" icon="Files" title="缓存数量 " :func="clearCache" functitle="清空缓存"
        :num="cacheInfo.use"></home_data_num>
      <home_data_num color-type="red" icon="Fold" title="事件日志" :num="elogInfo.all"></home_data_num>
      <home_data_num color-type="green" icon="Fold" title="在线用户" :num="onlineInfo.all"></home_data_num>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import home_ctrls from './components/home_ctrls.vue'
import home_user_info from './components/home_user_info.vue';
import Data_navigate from '@/components/datas/data_navigate.vue';
import home_data_num from './components/home_data_num.vue';
import home_percent from './components/home_percent.vue';
import Farm2Request from '@/service/remoteRequests/Farm2Request';
import { RequestTypeEnum } from '@/types/commons/RequestTypeEnum';
import { reactive, ref } from 'vue';
import type { DataResponse } from '@/types/commons/DataResponse';
import type { ResourceInfo } from './types/ResourceInfo';
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
const diskInfo = reactive(<ResourceInfo>{
  all: 0,
  use: 0,
  percent: 0,
  title: ''
});
const filesInfo = reactive(<ResourceInfo>{
  all: 0,
  use: 0,
  percent: 0,
  title: ''
});
const ramInfo = reactive(<ResourceInfo>{
  all: 0,
  use: 0,
  percent: 0,
  title: ''
});

const cacheInfo = reactive(<ResourceInfo>{
  all: 0,
  use: 0,
  percent: 0,
  title: ''
});

const onlineInfo = reactive(<ResourceInfo>{
  all: 0,
  use: 0,
  percent: 0,
  title: ''
});

const elogInfo = reactive(<ResourceInfo>{
  all: 0,
  use: 0,
  percent: 0,
  title: ''
});

const cpuInfo = reactive(<ResourceInfo>{
  all: 0,
  use: 0,
  percent: 0,
  title: ''
});
const visitInfo = reactive(<ResourceInfo>{
  all: 0,
  use: 0,
  percent: 0,
  title: ''
});
const loadingFlag = ref(false);//加载中遮罩
const loadInfo = () => {
  Farm2Request.submit("api/current/resource", RequestTypeEnum.post, loadingFlag, {}).then((value: DataResponse) => {
    Object.assign(diskInfo, (value.data as { disk: ResourceInfo }).disk);
    Object.assign(filesInfo, (value.data as { files: ResourceInfo }).files);
    Object.assign(ramInfo, (value.data as { ram: ResourceInfo }).ram);
    Object.assign(cacheInfo, (value.data as { cache: ResourceInfo }).cache);
    Object.assign(onlineInfo, (value.data as { online: ResourceInfo }).online);
    Object.assign(elogInfo, (value.data as { elog: ResourceInfo }).elog);
    Object.assign(cpuInfo, (value.data as { cpu: ResourceInfo }).cpu);
    Object.assign(visitInfo, (value.data as { visit: ResourceInfo }).visit);
  }).catch(() => {

  });
}

const clearCache = () => {
  Farm2Request.submit("api/current/clearcache", RequestTypeEnum.post, loadingFlag, {}).then((value: DataResponse) => {
    Object.assign(diskInfo, (value.data as { disk: ResourceInfo }).disk);
    Object.assign(filesInfo, (value.data as { files: ResourceInfo }).files);
    Object.assign(ramInfo, (value.data as { ram: ResourceInfo }).ram);
    Object.assign(cacheInfo, (value.data as { cache: ResourceInfo }).cache);
    Object.assign(onlineInfo, (value.data as { online: ResourceInfo }).online);
    Object.assign(elogInfo, (value.data as { elog: ResourceInfo }).elog);
    Object.assign(cpuInfo, (value.data as { cpu: ResourceInfo }).cpu);
    Object.assign(visitInfo, (value.data as { visit: ResourceInfo }).visit);
  }).catch(() => {

  });
}



//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
</script>
<style></style>
